.nav-inicio{
 color: white;
cursor: pointer;
display: block;
font-weight: 300;
/*height: 130px;*/
letter-spacing: 0.02em;
line-height: 20px;
margin: 0 1% 1% 0;
overflow: hidden;
position: relative;
text-decoration: none;
width: 40%;
z-index: 1;
}


.nav-inicio a .info-inicio {
    transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
}
.nav-inicio a img {
    transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
}

.nav-inicio a:hover .info-inicio {
    transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    font-size: 40px;
    opacity: 1;
}
.nav-inicio a:hover img {
    transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    padding-left: 20px;
   
}



.orange
{
    background: #f37b53;
}
.gray
{
    background: #77808a;
}
.green
{
    background: #74B749;
}
.nav-inicio:hover, .nav-inicio:focus
{
   opacity: 0.7;
}
i.inicio > img{
    float:left;
    height: 100px;
    
    margin: 15px;
}
div.info-inicio{
    font-size: 35px;
    font-weight: bolder;
    color: white;
    padding-top: 8%;
    padding-bottom:50px;
     text-decoration: none;
}

a:hover, a:focus{
    text-decoration: none !important;
}

.inicio-center{
    padding-top: 3%;
}